<template>
	<view>
		<view class="first_top">
			<view class="top_choise" :class="a_color" @click='bcg_a()'>门诊预约</view>
			<view class="top_choise" :class="b_color" @click='bcg_b()'>理疗预约</view>
		</view>
		<!-- <view class="airing">广播</view> -->
		<view class="outfit">
			<p class="p" style="font-size: 42rpx;">南宁集萃堂中医门诊部</p>
			<p class="p" style="font-size: 33rpx;">电话： 1234565789</p>
			<p class="p" style="font-size: 35rpx;">地址： 广西壮族自治区南宁市青秀区桂雅路印尼园15路A座3楼</p>
		</view>
		<view class="outfit">
			<p class="p" style="font-size: 42rpx;">南宁集萃堂特色诊疗中心</p>
			<p class="p" style="font-size: 33rpx;">电话： 1234565789</p>
			<p class="p" style="font-size: 35rpx;">地址： 广西壮族自治区南宁市青秀区桂雅路印尼园15路A座3A楼</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a_color: 'bcg',
				b_color: '',
			}
		},
		methods: {
			bcg_a() {
				this.a_color = 'bcg';
				this.b_color = '';

			},
			bcg_b() {
				this.a_color = '';
				this.b_color = 'bcg';
			}

		}
	}
</script>

<style lang="scss">
	.bcg {
		background-color: #477460;
		color: white;
	}

	.airing {
		margin-top: 20rpx;
		line-height: 70rpx;
		background-color: #fdf6ec;
		height: 70rpx;
		padding-left: 15rpx;
		color: #f9b34a;
	}

	.first_top {
		margin: 10rpx;
		height: 65rpx;
		border: 1px solid #477460;
		text-align: center;
		border-radius: 10rpx;

		.top_choise {
			font-size: 30rpx;
			width: 50%;
			margin: 0 auto;
			line-height: 65rpx;
			display: inline-block;
		}
	}

	.outfit {
		text-align: center;
		background-color: #477460;
		color: white;
		height: 330rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		.p{
			margin: 10rpx;
			padding: 20rpx;
		}
	}
</style>